<template>
  <PageWrapper contentBackground>
    <div style="text-align: center" class="p-7.5">
      <div class="mb-4">
        <h1 class="md:text-lg text-md" style="color: rgba(51, 51, 51, 1)"
          >周口市工商业燃气一期工程</h1
        >
        <span class="text-secondary"> 现场管理员：壹二三 </span>
      </div>
      <StepBar :data="data" />
    </div>
    <!-- <StepBar :data="data1" /> -->
    <StepMenuDrawer :userData="userData" @register="registerDrawer" />
    <div class="ml-370 mt-10 mb-10">
      <a-button type="primary" @click="handleCreate()"> 施工人员 </a-button>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onBeforeMount, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Divider, Card, Descriptions, Steps, Tabs } from 'ant-design-vue';
  import { getProjectManagementApi, getProjectManagementUserApi } from '/@/api/admin/tenant';
  import { useDrawer } from '/@/components/Drawer';
  import { StepBar } from '/@/components/ModelTable/src/components/customCom/components/Asteps';
  import { StepMenuDrawer } from '/@/components/ModelTable/src/components/customCom/components/Asteps';
  // import StepBar from './components/StepBar.vue';
  // import StepMenuDrawer from './components/StepMenuDrawer.vue';
  export default defineComponent({
    components: {
      StepBar,
      StepMenuDrawer,
      PageWrapper,
      [Divider.name]: Divider,
      [Card.name]: Card,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      // --------
      const [registerDrawer, { openDrawer }] = useDrawer();
      // 测试提交
      const userData = ref([]);
      const data1 = ref([
        {
          projectState: 0,
          projectStateName: '工程报建',
          state: '已完成',
          createTime: '2023-05-23 09:44:13',
          endTime: '2023-05-23 09:44:16',
        },
        {
          projectState: 1,
          projectStateName: '立项',
          state: '正在进行时1',
          createTime: '2023-05-24 09:45:00',
          endTime: '2023-05-24 09:45:05',
        },
        {
          projectState: 2,
          projectStateName: '立项1',
          state: '未完成',
          createTime: '2023-05-24 09:45:00',
          endTime: '2023-05-24 09:45:05',
        },
        {
          projectState: 3,
          projectStateName: '立项1',
          state: '正在进行时',
          createTime: '2023-05-24 09:45:00',
          endTime: '2023-05-24 09:45:05',
        },
        {
          projectState: 4,
          projectStateName: '立项1',
          state: '未完成',
          createTime: '2023-05-24 09:45:00',
          endTime: '2023-05-24 09:45:05',
        },
      ]);
      const data = ref([
        // {
        //   projectState: 0,
        //   projectStateName: '工程报建',
        //   state: '已完成',
        //   createTime: '2023-05-23 09:44:13',
        //   endTime: '2023-05-23 09:44:16',
        // },
        // {
        //   projectState: 1,
        //   projectStateName: '立项',
        //   state: '正在进行时',
        //   createTime: '2023-05-24 09:45:00',
        //   endTime: '2023-05-24 09:45:05',
        // },
      ]);
      onBeforeMount(() => {
        init();
      });
      async function init() {
        const ret = await await getProjectManagementApi({ projectId: 100000 });
        if (ret && ret.length) {
          data.value = ret;
        }
      }
      async function initUser() {
        const ret = await await getProjectManagementUserApi({ id: 1 });
        // if (ret && ret.length) {
        //   data.value = ret;
        // }
        userData.value = ret;
      }
      function handleCreate(record: Recordable = {}) {
        initUser();
        openDrawer(true, {
          record,
          isUpdate: false,
        });
      }
      return { handleCreate, registerDrawer, data, userData, data1 };
    },
  });
</script>
<style lang="less" scoped></style>
